<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>jsTile</title>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.preload.js"></script>

<script type="text/javascript" src="../../js/jstile.js"></script>
<script type="text/javascript" src="../../js/jstile.layer.js"></script>
<script type="text/javascript" src="../../js/jstile.image.js"></script>
<script type="text/javascript" src="../../js/jstile.sprite.js"></script>
<script type="text/javascript" src="../../js/jstile.keytracker.js"></script>

<script type="text/javascript" src="js/enemies.js"></script>
<script type="text/javascript">
var gameover = false,
height = 250, width = 700,
backgroundLayer = new jstile.Layer(width, height, 30, '#000000'),
playerLayer = new jstile.Layer(width, height, 60),

// The background:
background = [
	new jstile.Image("pics/background1.png", 700, 250),
	new jstile.Image("pics/background2.png", 700, 250), 
	new jstile.Image("pics/background3.png", 700, 250),
	new jstile.Image("pics/background4.png", 700, 250),
	new jstile.Image("pics/background5.png", 700, 250),
	new jstile.Image("pics/background6.png", 700, 250)
],

// Backgrounds as sprites with their onDraw callback to move them
background1 = jstile.Sprite.factory(background[0], 0, 0, 1, 0, function(){ var left = this.left-1; if(left + width <= 0) left = width; this.setPosition(left, this.top); }),
background2 = jstile.Sprite.factory(background[1], width, 0, 1, 0, function(){ var left = this.left-1; if(left + width <= 0) left = width; this.setPosition(left, this.top); }),
background3 = jstile.Sprite.factory(background[2], 0, 0, 2, 0, function(){ var left = this.left-3; if(left + width <= 0) left = width; this.setPosition(left, this.top); }),
background4 = jstile.Sprite.factory(background[3], width, 0, 2, 0, function(){ var left = this.left-3; if(left + width <= 0) left = width; this.setPosition(left, this.top); }),
background5 = jstile.Sprite.factory(background[4], 0, 0, 3, 0, function(){ var left = this.left-4; if(left + width <= 0) left = width; this.setPosition(left, this.top); }),
background6 = jstile.Sprite.factory(background[5], width, 0, 3, 0, function(){ var left = this.left-4; if(left + width <= 0) left = width; this.setPosition(left, this.top); }),

// Enemy space ships
enemies = {},
brainyImage = {
	'idle':		new jstile.Image('pics/brainy_idle.png', 100, 42, jstile.VERTICAL, 7, 60),
	'explode':	new jstile.Image('pics/brainy_explode.png', 150, 42, jstile.VERTICAL, 7, 30),
},

// Player space shipimages
playerImage = {
	"idle":		new jstile.Image("pics/player_spaceship.png", 100, 26),
	"explode":	new jstile.Image("pics/player_explode.png", 100, 26),
	"up":		new jstile.Image("pics/boosterup.png", 14, 18, jstile.HORIZONTAL, 6, 60),
	"down":		new jstile.Image("pics/boosterdown.png", 14, 18, jstile.HORIZONTAL, 6, 60),
	"boost":	new jstile.Image("pics/booster1.png", 36, 14, jstile.VERTICAL, 6, 60),
	"booster":	new jstile.Image("pics/booster2.png", 36, 14, jstile.VERTICAL, 6, 60),
	"missile":	new jstile.Image("pics/player_missile.png", 35, 10, jstile.VERTICAL, 5, 90),
	"misExpl":	new jstile.Image("pics/player_missile_explode.png", 38, 23, jstile.VERTICAL, 7, 60)
},

playerUp = jstile.Sprite.factory(playerImage.up, 37, 15, -1),
playerBoost = jstile.Sprite.factory(playerImage.boost, -32, 5, 3),
playerBooster = jstile.Sprite.factory(playerImage.booster, -32, 5, 3),
playerDown = jstile.Sprite.factory(playerImage.down, 37, -7, 3),

player = jstile.Sprite.factory(playerImage.idle, width/2, height/2, 2, 0, function(){
	//Update the movement of the ship:
	var moved = false, left = this.left, top = this.top;
	if(jstile.keytracker[65]){ //this is left! (a)
		if(this.left - 5 > 0){
			left = this.left - 5;
			moved = true;
		}
	}
	if(jstile.keytracker[68]){ //this is right! (d)
		if(this.left + 5 < (this.layer.width - this.image.width)){
			left = this.left + 5;
			moved = true;
		}
	}
	if(jstile.keytracker[87]){ //this is up! (w)
		if(this.top - 3 > 0){
			top = this.top - 3;
			moved = true;
		}
	}
	if(jstile.keytracker[83]){ //this is down! (s)
		if(this.top + 3 < (this.layer.height - this.image.height)){
			top = this.top + 3;
			moved = true;
		}
	}

	if(moved) {
		this.setPosition(left, top);
	}
});

var
enemyOnDraw = function(){
	if(!enemies[this.id].update()) {
		delete enemies[this.id];
		this.remove();
		return false; // don't attempt to draw the sprite anymore
	}
},
enemySpawning = setInterval(function(){
	if(!gameover) {
		var rand = Math.random();
		switch (true) {
			case rand < 0.4: // minion
				var sprite = jstile.Sprite.factory(
					brainyImage.idle,		// image
					width-1,	// left
					Math.round(Math.random() * (height - brainyImage.idle.height)), // top
					2, // z-index
					0, // frame (used for multi sprite images
					enemyOnDraw, // Draw cb
					false, // Once
					function(){
						if(this.image == brainyImage.explode) {
							delete enemies[this.id];
							this.remove();
						}
					}
				);

				enemies[sprite.id] = new Enemy(sprite, player);
				enemies[sprite.id].id = sprite.id;
				playerLayer.addSprite(sprite);
				break;
		}
	}
}, 1000);

playerUp.active = false;
playerDown.active = false;
playerBooster.active = false;

player.addChild([playerUp, playerBoost, playerBooster, playerDown]);

backgroundLayer.addSprite([background1, background2, background3, background4, background5, background6]);
playerLayer.addSprite([player]);

window.onload = function() {
	var shooting = false,
	missileCb = function(drawn) {
		var left, tempArr, id, hit, i, sprite;
		if(this.image != playerImage.misExpl)
		{
			left = this.left + 10;
			if(left >= this.layer.width) {
				this.remove();
			}
			else {
				this.setPosition(left, this.top);
			}
	
			tempArr = [];
			for(id in enemies) {
				if(enemies[id].sprite != brainyImage.explode) {
					tempArr.push(enemies[id].sprite);
				}
			}
			
			hit = this.collides(tempArr)
			if(hit.length) {
				left = this.left + (playerImage.missile.width - playerImage.misExpl.width);
				this.setImage(playerImage.misExpl).setPosition(left, this.top);
				for ( var i = hit.length-1; i >= 0; --i) {
					var sprite = hit[i];
					if(sprite.image != brainyImage.explode && enemies[sprite.id] && enemies[sprite.id].damage()) {
						sprite.setImage(brainyImage.explode);
					}
				}
			}
		}
	},
	missileDoneCb = function() {
		if(this.image == playerImage.misExpl) {
			this.remove();
		}
	};
	
	//this is where the keybinding occurs
	jQuery(document).keydown(function(e){
		if(!gameover) {
			switch(e.keyCode){
				case 75: //this is shoot (k)
					if(!shooting) {
						//shoot missile here
						shooting = true;
						var missile = jstile.Sprite.factory(playerImage.missile, player.left + 90, player.top + 14, 10, 0, missileCb, false, missileDoneCb);
						playerLayer.addSprite(missile);
					}
					break;
				case 65: //this is left! (a)
					playerBooster.active = false;
					playerBoost.active = false;
					break;
				case 87: //this is up! (w)
					playerUp.active = true;
					break;
				case 68: //this is right (d)
					playerBooster.active = true;
					playerBoost.active = false;
					break;
				case 83: //this is down! (s)
					playerDown.active = true;
					break;
			}
		}
	});
	//this is where the keybinding occurs
	jQuery(document).keyup(function(e){
		if(!gameover){
			switch(e.keyCode){
				case 75: //this is shoot (k)
					shooting = false;
					break;
				case 65: //this is left! (a)
					playerBooster.active = false;
					playerBoost.active = true;
					break;
				case 87: //this is up! (w)
					playerUp.active = false;
					break;
				case 68: //this is right (d)
					playerBooster.active = false;
					playerBoost.active = true;
					break;
				case 83: //this is down! (s)
					playerDown.active = false;
					break;
			}
		}
	});
	
	backgroundLayer.init('background').start();
	playerLayer.init('players').start();
};
</script>
</head>
<body>
	<div style="position: absolute; background-color: black;" id="background"></div>
	<div style="position: absolute;" id="players"></div>
</body>
</html>